<template>
	<view class="root-box root-container root-page-top">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<template v-slot:top>
				<uv-navbar @leftClick="goBack" placeholder bgColor="transparent" :fixed="false" title="收益"></uv-navbar>
				<view class="content">
					<view class="plan-i-box">
						<view class="plan-i-item">
							<view class="pi-title">累计收益(元)</view>
							<view class="pi-num">{{totalPrice}}</view>
						</view>
						<view class="plan-i-item">
							<view class="pi-title">可提现(元)</view>
							<view class="pi-num">{{remainingAmount}}</view>
						</view>
						<view class="tixian-box"  @click="onGoWithdraw">去提现</view>
					</view>
					<view class="loop-i-boox mt-20" id="tabsWrap">
						<ZyhTabs v-model:activeIndex="active" :tabs="tabs" activeColor="#333" inactiveColor="#999"
							sliderColor="#ff0000" :sliderWidth="60" :fontSize="24" :paddingTopValue="15" @update:activeIndex="change"
							:paddingBottomValue="15" />
					</view>
				</view>
			</template>
			<view class="loop-container">
				<view class="loop" v-for="(item,index) in dataList" :key="item.id">
					<view class="loop-i-item-box">
						<view class="loop-i-item">
							<view class="server-name">{{item.product_name}}</view>
							<view class="loop-i-item-num-box">收益￥{{item.total_price}}</view>
						</view>
						<view class="loop-i-item mt-20">
							<view class="fz20 clight">{{item.order_no}}</view>
							<view class="fz20 clight">{{item.service_time}}</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
		<skilledNavbar :tabValue="tabValue"></skilledNavbar>
	</view>

</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import skilledNavbar from '../components/skilled_navbar.vue'
	import ZyhTabs from "@/components/ZyhTabs.vue"
	import {
		navigate
	} from '@/util/tools.js';
	
	import {
		technicianProfileIncomeList
	} from '@/api/other.js'
	import { useCustomBack } from '@/components/useCustomBack.js'
	
	const dataList = ref([])
	const paging = ref(null)
	const tabValue = ref(2)
	const currentTab = ref(0)
	const tabs = ref(["已结算", "待结算"])
    const totalPrice=ref(0)
	const remainingAmount=ref(0)
	const active = ref(0)
	const incomeType=ref(1);
	
	const { goBack } = useCustomBack('/pages-user/select_Identity')

	const onTabChange = (index) => {
		console.log("切换到：", index)
	}

	const change = async (index) => {
		currentTab.value = index;
		incomeType.value= Number(index)+1
		console.log('-------incomeType.value------',incomeType.value)
		paging.value?.reload()
		
    }
	const onGoWithdraw = () => {
		navigate('/pages-skilled/withdraw/action')
	}
	
	const queryList = (pageNo, pageSize) => {
		technicianProfileIncomeList({
			page: pageNo,
			limit: pageSize,
			type:incomeType.value
			
		}).then(res => {
			
			totalPrice.value=res.result.total_price||0;
			remainingAmount.value=res.result.remaining_amount||0;
			paging.value.complete(res.result.data);
		}).catch(res => {
			paging.value.complete(false);
		})
	}
	
	
	
	
</script>

<style lang="scss" scoped>
	.root-box {
		.content {
			padding: 30rpx 30rpx 0 30rpx;
			box-sizing: border-box;
		}
	}

	.plan-i-box {
		display: flex;
		background-color: red;
		justify-content: space-between;
		align-items: center;
		border-radius: 20upx;
		padding: 20upx 160upx;
		box-sizing: border-box;
		color: #fff;
		position: relative;
	}

	.plan-i-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.pi-title {
		font-size: 20upx;
	}

	.pi-num {
		font-size: 36upx;
	}

	.tixian-box {
		position: absolute;
		background-color: #fff;
		right: 0;
		top: 30upx;
		border-radius: 20upx 0 0 20upx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 5upx 20upx;
		font-size: 20upx;
		color: red;
	}

	.loop-i-boox {
		background-color: #fff;
		width: 100%;
		position: relative;
		box-sizing: border-box;

		::v-deep(.tui-tabs) {
			width: 100% !important;
		}
	}

	.month-box {
		padding: 20upx 30upx;
		display: flex;
		align-items: center;
		font-size: 24upx;
		color: #333;
		border-top: 1px solid #efefef;

	}

	.tongji-box {
		border-top: 1px solid #efefef;
		padding: 20upx 40upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tongji-item-box {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}

	.loop-i-item-box {
		border-top: 1px solid #efefef;
		padding: 20upx 30upx;
	}

	.loop-i-item {
		display: flex;
		justify-content: space-between;
	}

	.loop-i-item-num-box {
		background-color: red;
		color: #fff;
		padding: 5upx 10upx;
		font-size: 20upx;
	}

	.loop {
		background-color: #fff;
	}

	.server-name {
		font-size: 30upx;
		font-weight: 500;
	}
</style>